<template>
    <view class="page">
        <view class="title">
            选择职位名称
        </view>

        <view class="searchLine">
            <u-input v-model="keyword" shape="circle" prefixIcon="search" :clearable="true" placeholder="搜索职位名称">
            </u-input>
        </view>
        <view class="search-list" v-if="keyword">
            <view style="padding: 20rpx 0;border-bottom: 1px solid #dcdcdc;" v-for="(item,index) in search_list"
                :key="index" @click="setPosition(item);">
                <view>{{item.name}}</view>
                <view style="font-size: 24rpx;margin-top: 10rpx;">{{item.cate}}</view>
            </view>
        </view>
        <view class="detail" v-else>
            <view class="leftCondition">
                <scroll-view style="height: 100%;" scroll-y="true">
                    <view class="item" v-for="(item,index) in list" :key="index" @click="p1 = index;"
                        :class="{Active:index == p1}">
                        {{item.name}}
                    </view>
                </scroll-view>
            </view>

            <view class="result" v-if="list[p1]">
                <view style="overflow: hidden;" v-for="(item,index) in list[p1].childs">
                    <view class="result_title lgTitle">
                        {{item.name}}
                    </view>

                    <view class="tagsBox">
                        <view class="tagItem md4Text lgrey" v-for="(row,key) in item.childs" :key="key"
                            @click="setPosition(row);">
                            {{row.name}}
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                keyword: '',
                list: [],
                p1: 0,
                search_list: []
            };
        },

        methods: {
            setPosition(row) {
                uni.setStorageSync('select_position', row);
                this._toBack();
            },

            getPositionList() {
                this._ajax({
                    url: '/api/index/getPositionTree',
                    success: res => {
                        if (res.code == 1) {
                            this.list = res.data;
                        }
                    }
                })
            }
        },
        watch: {
            keyword(v) {
                if (v) {
                    var list = [];
                    var reg = new RegExp(this.keyword, 'i');
                    for (var i in this.list) {
                        for (var j in this.list[i].childs) {
                            for (var k in this.list[i].childs[j].childs) {
                                var row = this.list[i].childs[j].childs[k];
                                var arr = row.name.match(reg);
                                if (arr) {
                                    row.cate = this.list[i].name + ' - ' + this.list[i].childs[j].name;
                                    list.push(row);
                                }
                            }
                        }
                    }
                    this.search_list = list;
                }
            }
        },
        onLoad() {
            this.getPositionList();
        }
    };
</script>

<style scoped lang="less">
    .page {
        padding: 0 30rpx;
        background: #FFFFFF;

        .title {
            font-size: 40rpx;
            font-weight: bold;
            height: 120rpx;
            line-height: 120rpx;
        }

        .searchLine {
            width: 100%;
            display: flex;
            align-items: center;

            // background-color: #f5f5f5;
        }

        .detail {
            width: 100%;
            display: flex;
            margin-top: 30rpx;
            height: calc(100vh - 240rpx);

            .leftCondition {
                width: 200rpx;
                height: 100%;
                border-right: 2upx solid #E5E5E5;

                .item {
                    margin-bottom: 30rpx;
                    text-align: center;
                    width: 180rpx;
                }


                .Active {
                    background: #3465B1;
                    opacity: 1;
                    text-align: center;
                    line-height: 48rpx;
                    color: #FFFFFF;
                    border-radius: 47upx
                }
            }

            .result {
                width: calc(100% - 200rpx);
                padding-left: 30rpx;
                overflow-x: hidden;

                .tagsBox {

                    width: 480upx;
                    margin-top: 30upx;

                    .tagItem {
                        float: left;
                        width: 220upx;
                        margin-right: 20upx;
                        margin-bottom: 40upx;
                        height: 44upx;
                        line-height: 44upx;
                        text-align: center;
                        background: #F5F5F5;
                        opacity: 1;
                        border-radius: 4upx;
                    }
                }
            }
        }
    }

    .search-list {
        height: calc(100vh - 240rpx);
        overflow-x: hidden;
        margin-top: 30rpx;
    }
</style>
